<template>
  <div id="user-edit">
    <el-container>
      <el-main>
        <el-form label-width="100px">
          <el-form-item style="width: 320px;" label="头像">
            <el-upload class="avatar-uploader"
                       :action="actionUrl"
                       :headers="uploadHeaders"
                       :show-file-list="false"
                       :on-success="handleAvatarSuccess"
                       :before-upload="beforeAvatarUpload">
              <img v-if="form.avatar" :src="form.avatar" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item style="width: 320px;" label="用户名">
            <el-input v-model="form.loginName" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item style="width: 320px;" label="真实姓名">
            <el-input v-model="form.name" placeholder="请输入真实姓名"></el-input>
          </el-form-item>
          <el-form-item style="width: 320px;" label="归属公司">
            <el-select placeholder="请选择归属公司" v-model="form.companyId">
              <el-option v-for="(item,index) of companies" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form inline label-width="100px">
          <el-form-item label="归属部门" style="width: 320px;">
            <el-input readonly v-model="form.office" placeholder="请选择归属部门"></el-input>
          </el-form-item>
          <el-form-item>
            <union-select :url="button.children[1].target" :init-value="form.companyId || '0'"
                          :permission="button.children[1].id" @choseItem="choseOffice"></union-select>
          </el-form-item>
        </el-form>
        <el-form label-width="100px">
          <el-form-item label="部门编号" style="width: 320px;">
            <el-input readonly v-model="form.officeCode" placeholder="请选择部门"></el-input>
          </el-form-item>
          <el-form-item label="用户编号" style="width: 320px;">
            <el-input v-model="codeSuffix" placeholder="请输入用户编号"></el-input>
          </el-form-item>
          <el-form-item label="办公电话" style="width: 320px;">
            <el-input v-model="form.phone" placeholder="请输入办公电话"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" style="width: 320px;">
            <el-input v-model="form.mobile" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item label="角色" style="width: 320px;">
            <el-select placeholder="请选择角色" v-model="form.roleId">
              <el-option v-for="(item,index) of roles" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer height="100%">
        <el-divider></el-divider>
        <el-form label-width="100px">
          <el-form-item label=" ">
            <el-button type="primary" @click="submit" icon="el-icon-s-promotion"> 提交</el-button>
          </el-form-item>
        </el-form>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import unionSelect from '../../../common/union-select'

  export default {
    name: "user-edit",
    components: {
      unionSelect
    },
    data() {
      return {
        companies: [],
        codeSuffix: '',
        roles: [],
        uploadHeaders:{},
        actionUrl:'',
        imageUrl:'',
      }
    },
    watch: {
      'form.companyId'(val) {
        if (this.common.isNotEmpty(val)) {
          this.getRoles(val)
        }
        this.$set(this.form, 'office', '')
        this.$set(this.form, 'officeCode', '')
      }
    },
    methods: {
      handleAvatarSuccess(res, file){
        if (res.code ==1){
          this.form.avatar =res.data.rows[0];
        }
        console.log("res",res)
      },
      beforeAvatarUpload(file){
        this.buildUploadData()
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      submit() {
        if (!this.validate()) {
          return
        }
        this.form.code = this.form.officeCode + this.codeSuffix
        this.$set(this.form,'password','')
        this.common.request({
          url: this.button.target,
          param: this.form,
          permission: this.button.id,
          success: res => {
            if (res.code == 1) {
              this.$emit('save')
            }
          }
        })
      },
      getSuffixCode() {
        console.log(this.form.code, this.form.officeCode)
        if (this.common.isNotEmpty(this.form.code) && this.common.isNotEmpty(this.form.officeCode)) {
          this.codeSuffix = this.form.code.substring(this.form.officeCode.length)
        }
      },
      validate() {
        let validateData = [
          {key: this.form.name, msg: '真实姓名'},
          {key: this.form.loginName, msg: '用户名'},
          {key: this.form.companyId, msg: '归属公司'},
          {key: this.form.officeId, msg: '归属部门'},
          {key: this.form.roleId, msg: '角色'},
          {key: this.codeSuffix, msg: '用户编号'},
        ]
        return this.common.validate(validateData)
      },
      getRoles(companyId) {
        this.common.request({
          url: this.button.children[2].target,
          param: {
            companyId: companyId
          },
          permission: this.button.children[2].id,
          loading: false,
          success: res => {
            if (res.code == 1) {
              this.roles = $.extend(true, [], res.data.rows)
            }
          }
        })
      },
      choseOffice(content) {
        this.$set(this.form, 'officeId', content.id)
        this.$set(this.form, 'office', content.name)
        this.$set(this.form, 'officeCode', content.code)
      },
      getCompanies() {
        this.common.request({
          url: this.button.children[0].target,
          param: {
            parentId: '0'
          },
          permission: this.button.children[0].id,
          loading: false,
          success: res => {
            if (res.code == 1) {
              this.companies = res.data.rows
            }
          }
        })
      },
      buildUploadData(){
        let permission = this.common.notAutoParse(this.unionButton.children[2].children[3].id + "::" + this.unionButton.children[2].children[3].target,this.common.now())
        let headers = {
          PERMISSION:permission,
          TOKEN:sessionStorage.getItem('token')
        }
        let url = this.common.requestUrl.getUrl(this.unionButton.children[2].children[3].target)
        this.uploadHeaders = $.extend(true,{},headers)
        this.actionUrl = url;
      }
    },
    mounted() {
      $('.el-button').css('font-size','16px')
      this.getCompanies()
      this.getSuffixCode()
      if (this.common.isNotEmpty(this.form.companyId)) {
        this.getRoles(this.form.companyId)
      }
      this.buildUploadData()
    },
    props: {
      form: {
        type: Object,
        default() {
          return {
            id: '',
            loginName: '',
            name: '',
            code: '',
            companyId: '',
            company: '',
            companyCode: '',
            office: '',
            officeId: '',
            officeCode: '',
            role: '',
            roleId: '',
            avatar: '',
          }
        }
      },
      unionButton: {
        type: Object
      },
      button: {
        type: Object
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
  }
  .avatar {
    width: 78px;
    height: 78px;
    display: block;
  }
</style>
